<template>
  <div>
    <el-table
      :data="tableList"
      style="width: 100%"
    >
      <el-table-column
        prop="userName"
        label="用户名"
      >
      </el-table-column>
      <el-table-column
        prop="type"
        label="收支类型"
      />
      <el-table-column
        prop="status"
        label="支付状态"
      >
      </el-table-column>
      <el-table-column
        prop="payName"
        label="付款"
      />
      <el-table-column
        prop="paySn"
        label="商家订单号"
      />
      <el-table-column
        prop="auditStatus"
        label="审核状态"
      ></el-table-column>

      <el-table-column
        label="操作"
        fixed="right"
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.auditStatus !== '审核通过'">
          <el-button type="primary" size="small" @click="onApproval(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="报价列表"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <PriceListView :orderId="selectOrderId" @dismissHandle="handleClose" :isAdmin="true" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="订单审核"
      :visible.sync="approvalVisible"
      width="30%"
      :before-close="handleCloseApproval"
    >
      <el-row :gutter="20">
        <el-col :span="6">审核状态：</el-col>
        <el-col :span="12">
          <template>
            <el-radio-group v-model="approvalValue">
              <el-radio label="审核通过">通过</el-radio>
              <el-radio label="审核拒绝">拒绝</el-radio>
            </el-radio-group>
          </template>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="approvalValue === '审核拒绝'" style="margin-top: 10px;">
        <el-col :span="6">拒绝原因：</el-col>
        <el-col :span="18">
          <template>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="remark"
            />
          </template>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="display: flex;justify-content: center;margin-top: 20px;">
        <el-col :span="3">
          <el-button type="primary" @click="fetchApproval">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import PriceListView from "@/views/want_order/price_list.vue";
import { approvalRefundAudit } from '@/api/yzWallet';

export default ({
  name: 'OrderManagerTable',
  components: {
    PriceListView
  },
  props: {
    tableList: []
  },
  data() {
    return {
      dialogVisible: false,
      selectOrderId: '',
      approvalVisible: false,
      approvalValue: '',
      rowData: {},
      remark: ''
    }
  },
  methods: {
    onOpenDetail(row) {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 审核
    onApproval(rowData) {
      this.rowData = { ...rowData };
      this.approvalVisible = true;
    },
    async fetchApproval() {
      const params = { id: this.rowData.id, auditStatus: this.approvalValue, remark: this.remark }
      const { data } = await approvalRefundAudit(params);
      if (data.code === 200) {
        this.$message({ message: '审核成功', type: 'success'});
        this.$emit('refreshList');
      } else {
        this.$message({
          message: data.msg || '审核失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    handleCloseApproval() {
      this.approvalVisible = false;
      this.approvalValue = '';
      this.remark = '';
    }
  }
})

</script>
